<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>form表单验证</title>
		<script type="text/javascript">
			/*
			 * form表单的客户端验证机制：
			 * form表单是通过submit方法提交到服务器端的；
			 * submit类型的按钮再点击事件时会自动执行submit方法，进行表单提交；
			 * submit的按钮的click事件时在submit方法提交之前进行执行；如果click事件返回值是false则会终止submit提交动作；
			 * 如果click事件的返回值是true，才会继续执行submit提交动作；
			 * 
			 */
			// 进行js浏览器客户端验证
			function checkMe(){
				// 默认返回值
				var isOK = true;
				// 默认提示信息
				var strMsg = ""
				// 用户名验证--不为空
				// 获取用户名对象
				var name = document.getElementById("txtName");
				
				// 验证通过的条件
				//if(!(name && name.value != "")){					
				//}
				
				if(!name || name.value == ""){
					// 提示信息
					strMsg +="请输入用户名!\n";
					// 终止提交表单
					isOK = false;
				}
				// 验证密码--不为空
				// 获取密码对象
				var psw = document.getElementById("txtPsw");
				// 验证不通过
				if(!(psw && psw.value != "")){
					// 提示信息
					strMsg +="请输入密码!\n";
					// 终止提交表单
					isOK = false;
				}
				
				// 获取密码对象
				var mail = document.getElementById("txtMail");
				// 邮箱的正则表达式
				var regMail = /^\w+@\w+.[A-Za-z]{2,3}(.[A-Za-z]{2,3})?$/;
				// 验证不通过
				if(!(mail && mail.value != "" && regMail.test(mail.value))){
					// 提示信息
					strMsg +="请输入合法的邮箱格式!\n";
					// 终止提交表单
					isOK = false;
				}
				
				// 性别验证
				// 获取所有的单选框控件组
				// 获取的是同名的一组控件对象，是一个数组类型
				var sexs = document.getElementsByName("txtSex");				
				// 是否选中的标识变量
				var isChecked = false;
				// 使用for循环来检测是否有控件被选中
				for(var i=0;i<sexs.length;i++){
					// 检测当前的控件对象是否被选中
					if(sexs[i] && sexs[i].checked){
						// 有一个控件被选中
						isChecked = true;
						break;
					}
				}
				// 验证结果
				if(isChecked == false){
					// 没有选中
					strMsg +="请选择性别!\n";
					isOK= false;
				}
				
				// 年份验证
				// 验证出生年份--不为空
				// 获取出生年份对象
				var year = document.getElementById("birthdayYear");
				//console.info(year.selectedIndex);
				//console.info(year.value);
				// 验证不通过
				if(!(year && year.value != "")){
					// 提示信息
					strMsg +="请选中出生年份!\n";
					// 终止提交表单
					isOK = false;
				}
				
				// 兴趣验证
				// 获取所有的多选框控件组
				// 获取的是同名的一组控件对象，是一个数组类型
				var hobbies = document.getElementsByName("txtHobby");				
				// 是否选中的标识变量
				var isHobbyChecked = false;
				// 使用for循环来检测是否有控件被选中
				for(var i=0;i<hobbies.length;i++){
					// 检测当前的控件对象是否被选中
					if(hobbies[i] && hobbies[i].checked){
						// 有一个控件被选中
						isHobbyChecked = true;
						break;
					}
				}
				// 验证结果
				if(isHobbyChecked == false){
					// 没有选中
					strMsg +="请至少选择一项兴趣!";
					isOK= false;
				}
				
				// 弹出提示信息
				if(isOK == false){
					alert(strMsg);
				}
				
				return isOK;
			}
			
		</script>
	</head>

	<body>
		<p>使用form表单向服务器发送数据</p>
		<form action="#" method="post">
			<table width="800px" align="center" cellspacing="0" border="1px">
				<tr>
					<td>用户名:</td>
					<td><input type="text" id="txtName" name="txtName" /></td>
					<td>请输入用户名</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" id="txtPsw" name="txtPsw" /></td>
					<td>请输入密码</td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td><input type="text" id="txtMail" name="txtMail" /></td>
					<td>请输入邮箱</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<!---单选框要求：同组的选项的name属性要一样，才能实现互斥单选-->
						<input type="radio" id="txtSex1" name="txtSex" value="女" />女
						<input type="radio" id="txtSex2" name="txtSex" value="男" />男
						<input type="radio" id="txtSex3" name="txtSex" value="未知" />未知
					</td>
					<td>请选择性别</td>
				</tr>
				<tr>
					<td>出生年月:</td>
					<td>
						<select id="birthdayYear" name="birthdayYear">
							<option></option>
							<option value="1990">1990</option>
							<option value="1991">1991</option>
							<option value="1992">1992</option>
							<option value="1993">1993</option>
						</select>年
						<select id="birthdayMonth" name="birthdayMonth">
							<option></option>
							<option value="1">01</option>
							<option value="2">02</option>
							<option value="3">03</option>
							<option value="4">04</option>
						</select>月
					</td>
					<td>请选择出生年月</td>
				</tr>
				<tr>
					<td>兴趣爱好:</td>
					<td>
						<!---多选框要求：同组的选项的name属性要一样，才能正确的向服务器发送表单数据-->
						<input type="checkbox" id="txtHobby1" name="txtHobby" value="coding" />写代码
						<input type="checkbox" id="txtHobby2" name="txtHobby" value="gaming" />打游戏
						<input type="checkbox" id="txtHobby2" name="txtHobby" value="lvyou" />旅游
					</td>
					<td>请选择兴趣</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td><input type="file" id="txtImg" name="txtImg" /></td>
					<td>请选择头像</td>
				</tr>
				<tr>
					<td>自我介绍:</td>
					<td>
						<textarea rows="8" cols="60" id="txtIntroduce" name="txtIntroduce">
						</textarea>
					</td>
					<td>请输入自我介绍</td>
				</tr>
				<tr>
					<!--使用submit类型的按钮点击会自动提交表单--->
					<td colspan="3" align="center"> <input type="submit" value="注册" onclick="return checkMe();" /></td>
					
				</tr>
			</table>
		</form>
	</body>

</html>